<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>立体按压效果按钮</title>
    <style>
      /*css样式*/
      :root {
        --text-color: #e6f1ff;
        --color-100: #90e0ef;
        --color-200: #48cae4;
        --color-300: #00b4d8;
        --color-400: #0077b6;
        --color-500: #03045e;
        --radius: 18px;
        --neon-glow: 0 0 20px rgba(0, 180, 216, 0.4);
        --button-shadow: -7px 6px 0 0 rgba(0, 119, 182, 0.4),
          -14px 12px 0 0 rgba(0, 119, 182, 0.3),
          -21px 18px 4px 0 rgba(0, 119, 182, 0.25),
          -28px 24px 8px 0 rgba(0, 119, 182, 0.15),
          -35px 30px 12px 0 rgba(0, 119, 182, 0.12),
          -42px 36px 16px 0 rgba(0, 119, 182, 0.08),
          -56px 42px 20px 0 rgba(0, 119, 182, 0.05);
      }

      body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0a192f;
        overflow: hidden;
      }

      .button {
        position: relative;
        width: 220px;
        height: 80px;
        border: 0;
        border-radius: var(--radius);
        background: transparent;
        font-size: 23px;
        font-family: "Segoe UI", sans-serif;
        font-weight: 600;
        cursor: pointer;
        transform: rotate(353deg) skewX(4deg);
        outline: none;
        perspective: 1000px;
      }

      .shadow {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        filter: blur(1px);
      }

      .shadow::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: calc(var(--radius) * 1.1);
        background: var(--color-500);
        filter: blur(5px);
        transition: all 0.3s ease;
        box-shadow: var(--button-shadow);
      }

      .wrap {
        position: relative;
        height: 100%;
        padding: 3px;
        border-radius: inherit;
        background: linear-gradient(
          to bottom,
          var(--color-100) 0%,
          var(--color-400) 100%
        );
        transform: translate(6px, -6px);
        transition: all 0.3s ease;
        overflow: hidden;
      }

      .content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        border-radius: calc(var(--radius) * 0.85);
        background: linear-gradient(
          to bottom,
          var(--color-300) 0%,
          var(--color-400) 100%
        );
        box-shadow: inset -2px 12px 11px -5px var(--color-200),
          inset 1px -3px 11px 0px rgba(0, 0, 0, 0.35);
        transition: all 0.3s ease;
      }

      .content::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 10;
        width: 80%;
        top: 45%;
        bottom: 35%;
        margin: auto;
        background: linear-gradient(to bottom, transparent, var(--color-400));
        filter: brightness(1.3) blur(5px);
      }

      .text {
        position: relative;
        color: var(--text-color);
        text-shadow: -1px 1px 2px var(--color-500),
          0 0 5px rgba(230, 241, 255, 0.3);
      }

      .button:hover .wrap {
        transform: translate(8px, -8px);
        box-shadow: var(--neon-glow);
      }

      .button:active .shadow::before {
        filter: blur(5px);
        opacity: 0.7;
        box-shadow: -7px 6px 0 0 rgba(0, 119, 182, 0.4),
          -14px 12px 0 0 rgba(0, 119, 182, 0.25),
          -21px 18px 4px 0 rgba(0, 119, 182, 0.15);
      }

      .button:active .content {
        box-shadow: inset -1px 12px 8px -5px rgba(3, 4, 94, 0.4),
          inset 0px -3px 8px 0px var(--color-200);
      }

      .button:active .wrap {
        transform: translate(3px, -3px);
      }
    </style>
  </head>
  <body>
    <button class="button">
      <div class="shadow"></div>
      <div class="wrap">
        <div class="content">
          <span class="text">Click</span>
        </div>
      </div>
    </button>
  </body>
</html>
